<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dojo Tooltip Widget Test with Bidi support</title>

	<style type="text/css">
		@import "../../../../dijit/themes/tundra/tundra.css";
		@import "../../../../dojo/resources/dojo.css";			

		td { padding: 20px; }
	</style>



		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="parseOnLoad: true, isDebug: true">
		</script>	

	<script type="text/javascript">
		dojo.require("dojo.parser");
        dojo.require("doh.runner");
        
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.form.ValidationTextBox");
		dojo.require("dijit.Tooltip");
		dojo.require("dijit._BidiSupport");
		
        
          dojo.addOnLoad(function(){
				function checkContextualDir(text){
			        var fdc = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(text);
			        // if found return the direction that defined by the character, else return widgets dir as defult.
			        return fdc ? ( fdc[0] <= 'z' ? "ltr" : "rtl" ) : "ltr"; 
			    }
				doh.register("tooltip text direction", [
					{
						name: "tooltip LTR text direction for LTR widget",
                    	runTest: function(){
                       	    var d = new doh.Deferred();
						    var tt = dijit.byId("id1_tooltip");
						    tt.open(dojo.byId("id1"));						    
						    setTimeout(d.getTestCallback(function(){
					            doh.is("ltr",tt.textDir, "textDir of : " + tt.id);
						        doh.is("ltr",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
				                tt.close(); 
				            }), 200);
					        return d;
					       }	      				        
					},
					{
						name: "tooltip RTL text direction for LTR widget",
						runTest: function(){
						var d = new doh.Deferred();
						    var tt = dijit.byId("id2_tooltip");
						    tt.open(dojo.byId("id2"));						    
						    setTimeout(d.getTestCallback(function(){
					            doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
						        doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
				                tt.close();
					        }), 400);
					        return d;
		
						}
					},
				    {
					    name: "tooltip AUTO text direction for LTR widget",
					    runTest: function(){
					    var d = new doh.Deferred();
					        var tt = dijit.byId("id3_tooltip");
					        tt.open(dojo.byId("id3"));
					        setTimeout(d.getTestCallback(function(){
					            doh.is("auto",tt.textDir, "textDir of : " + tt.id);
						        doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
				                tt.close(); 
					        }), 400);
					        return d;
					    }
					}
				]);
				doh.register("tooltip RTL text direction for tooltip with HTML inline elements", [
					{
						name: "tooltip RTL text direction for LTR widget",						
                     	runTest: function(){
                     	var d = new doh.Deferred();
						    var tt = dijit.byId("id7_tooltip");
						    tt.open(dojo.byId("id7"));
						    setTimeout(d.getTestCallback(function(){
						        doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
							    doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
    							tt.close();
					        }), 400);
					        return d;
						}	      				        
					},
					{
					    name: "tooltip LTR text direction for RTL widget",
					    runTest: function(){
					    var d = new doh.Deferred();
					        var tt = dijit.byId("id4_tooltip");
					        tt.open(dojo.byId("id4"));
					        setTimeout(d.getTestCallback(function(){
					           doh.is("ltr",tt.textDir, "textDir of : " + tt.id);
						       doh.is("ltr",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
						       tt.close(); 
					        }), 400);
					        return d;
					    }
					},	
				    {
					    name: "tooltip text alignment for tooltip with dir 'rtl'",
					    runTest: function(){
					    var d = new doh.Deferred();
					        var tt = dijit.byId("id4_tooltip");
					        tt.open(dojo.byId("id4"));
					        setTimeout(d.getTestCallback(function(){
						        doh.is("right",dijit._masterTT.containerNode.align, "alignment of : " + tt.id);
				                tt.close(); 
					        }), 400);
					        return d;
					    }
					},	
				    {
					    name: "tooltip RTL text direction for RTL widget",
					    runTest: function(){
					    var d = new doh.Deferred();
					        var tt = dijit.byId("id5_tooltip");
					        tt.open(dojo.byId("id5"));
					        setTimeout(d.getTestCallback(function(){
					           doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
						       doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
						       tt.close(); 
					        }), 400);
					        return d;
					    }
					},
					{
					    name: "tooltip AUTO text direction for RTL widget",
					    runTest: function(){
					    var d = new doh.Deferred();
					        var tt = dijit.byId("id6_tooltip");
					        tt.open(dojo.byId("id6"));
					        setTimeout(d.getTestCallback(function(){
					           doh.is("auto",tt.textDir, "textDir of : " + tt.id);
						       doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
						       tt.close(); 
					        }), 400);
					        return d;
					    }
					}	
				]);
				
                doh.register("tooltip RTL text direction for tooltip with HTML inline elements", [
					{
						name: "tooltip RTL text direction for LTR widget",						
                     	runTest: function(){
                     	var d = new doh.Deferred();
						    var tt = dijit.byId("id7_tooltip");		    
						    tt.open(dojo.byId("id7"));
						    setTimeout(d.getTestCallback(function(){
						        doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
							    doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
    							tt.close();
					        }), 400);
					        return d;
						}	      				        
					}
				]);
							
                doh.register("tooltip with children nodes", [
					{
						name: "tooltip AUTO text direction, check text direction for children",						
                     	runTest: function(){
                     	var d = new doh.Deferred();
						    var tt = dijit.byId("id8_tooltip");
						    tt.open(dojo.byId("id8"));
						    setTimeout(d.getTestCallback(function(){
						        dojo.forEach(dijit._masterTT.containerNode.children, function(child){
						            var dir = checkContextualDir(dojo.isIE? child.outerText : child.textContent); 
						            doh.is(dir, child.dir, "direction of : " + tt.id);
						        }, this);
						        doh.is("auto",tt.textDir, "textDir of : " + tt.id);
					            tt.close(); 
					        }), 400);
					        return d;
						}	      				        
					},
					{
						name: "Check text direction for tooltip with AUTO text direction and RTL dir attribute",						
                     	runTest: function(){
                     	var d = new doh.Deferred();
						    var tt = dijit.byId("id10_tooltip");
						    tt.open(dojo.byId("id10"));
						    setTimeout(d.getTestCallback(function(){
						        dojo.forEach(dijit._masterTT.containerNode.children, function(child){
						            var dir = checkContextualDir(dojo.isIE? child.outerText : child.textContent); 
						            doh.is(dir, child.dir, "direction of nodes : " + tt.id);
						        }, this);
						        doh.is("auto",tt.textDir, "textDir of : " + tt.id);
					            tt.close(); 
					        }), 400);
					        return d;
						}	      				        
					},
    				{
						name: "Check alignment for tooltip with RTL dir attribute",			
                     	runTest: function(){
                     	var d = new doh.Deferred();
						    var tt = dijit.byId("id10_tooltip");   
						    tt.open(dojo.byId("id10"));
						    setTimeout(d.getTestCallback(function(){
						        doh.is("right",dijit._masterTT.containerNode.align, "alignment of : " + tt.id);
					            tt.close(); 
					        }), 400);
					        return d;
						}	      				        
					}		
				]);

				doh.run();
			});

	</script>
</head>
<body class="tundra">

	<h1 class="testTitle">Tooltip test</h1>

	<p>Mouse-over or focus the items below to test tooltips.</p>

		<input type="text" id="id1" name="test1" data-dojo-type="dijit/form/ValidationTextBox" value="#1 tooltip ltr"/><br>
		<input type="text" id="id2" name="test2" data-dojo-type="dijit/form/ValidationTextBox" value="#2 tooltip rtl"/><br>
		<input type="text" id="id3" name="test3" data-dojo-type="dijit/form/ValidationTextBox" value="#3 tooltip auto"/><br><br />
		
	    <input type="text" id="id7" name="test7" data-dojo-type="dijit/form/ValidationTextBox" value="tooltip inline HTML elements"/><br><br />
		<input type="text" id="id8" name="test8" data-dojo-type="dijit/form/ValidationTextBox" value="tooltip auto with children nodes"/><br>
		
		<div dir="rtl">		
        <input type="text" id="id4" name="test4" data-dojo-type="dijit/form/ValidationTextBox" value="#4 tooltip ltr"/><br>
		<input type="text" id="id5" name="test5" data-dojo-type="dijit/form/ValidationTextBox" value="#5 tooltip rtl"/><br>
		<input type="text" id="id6" name="test5" data-dojo-type="dijit/form/ValidationTextBox" value="#6 tooltip auto"/><br><br />
		</div>
		<input type="text" id="id10" name="test10" data-dojo-type="dijit/form/ValidationTextBox" value="tooltip auto with children nodes" dir="rtl"/><br>

	<br>


 
    <span id="id1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id1"], textDir: "ltr"'>&#1495;&#1491;&#1513;!   tooltip #1 !!!</span>
	<span id="id2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id2"], textDir: "rtl"'>&#1495;&#1491;&#1513;!   tooltip #2!!!</span>
	<span id="id3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id3"], textDir: "auto"'>&#1495;&#1491;&#1513;!  tooltip  #3...</span>
    <span id="id4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id4"], textDir: "ltr", dir: "rtl"'>&#1495;&#1491;&#1513;!   tooltip #4 !!!</span>
	<span id="id5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id5"], textDir: "rtl"'>&#1495;&#1491;&#1513;!   tooltip #5!!!</span>
	<span id="id6_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id6"], textDir: "auto"'>&#1495;&#1491;&#1513;!  tooltip  #6...</span>
		
	

	<span id="id7_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id7"], textDir:"rtl"'>
	<i>
       &#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!
    </i>
    textDir :
    <b>
        RTL...
    </b></span>
    
   <span id="id8_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id8"], textDir: "auto"'>
	<b>
	Tooltip "auto" with block elements
	</b>
    <div> 
    DIV element
    <p > &#1506;&#1512;&#1498; &#1495;&#1491;&#1513; p element! </p>
    </div>
    <b>
    &#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!
   </b>
    <div > 
     &#1506;&#1512;&#1498; &#1495;&#1491;&#1513;! 
    </div>
	<p>long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text ..</p>
	</span>
	
	<span id="id10_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id10"], textDir: "auto", dir: "rtl"'>
	<b>
	Tooltip "auto" with block elements
	</b>
    <div> 
    DIV element
    <p> &#1506;&#1512;&#1498; &#1495;&#1491;&#1513; p element! </p>
    </div>
    <b>
    &#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!
   </b>
    <div > 
     &#1506;&#1512;&#1498; &#1495;&#1491;&#1513;! 
    </div>
	<p>long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text ..</p>
	</span>
<p></p>
<br>

</body>
</html>
